<section class="nga-gradient text-white">
  <div class="container col-xxl-8 px-4 py-5">
    <div class="row align-items-center">
      <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
        <div class="text-center">
          <h1 class="mt-2 display-4 fw-bold">Angular</h1>
          <h2 class="h1">Web Application</h2>
          <hr>
          <h2 class="h5 mt-4">{{ angular }}</h2>
          <h2 class="h5">{{ bootstrap }}</h2>
          <h2 class="h5">{{ fontawesome }}</h2>
          <div class="col-lg-12 mx-auto mt-4">
            <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
              <a class="nga-btn-home" routerLink="/cards">Get Started</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 offset-lg-1 p-0">
        <div class="position-lg-absolute top-0 left-0 overflow-hidden">
          <img src="./assets/params/images/home/demarrer-avec-angular.png" srcset="./assets/params/images/home/demarrer-avec-angular.png,
          ./assets/params/images/home/demarrer-avec-angular@2x.png 2x" alt="Getting started with Angular" width="360"
            height="350">
        </div>
      </div>
    </div>
  </div>
</section>

<div class="container px-4 py-5">
  <h2 class="display-6 fw-bold pb-2 text-center">Features</h2>
  <hr>
  <div class="row g-4 py-2 row-cols-1 row-cols-md-2 row-cols-lg-4">
    <div class="col">
      <div class="nga-card-step p-4">
        <a routerLink="/bootstrap">
          <i class="text-primary fab fa-bootstrap fa-2x mb-2"></i>
          <h3 class="h4 text-primary fw-bold">Bootstrap</h3>
          <p>How to use Buttons, Alerts, Pagination, Tables, Collapses</p>
        </a>
      </div>
    </div>
    <div class="col">
      <div class="nga-card-step p-4">
        <a routerLink="/services">
          <i class="text-primary fas fa-handshake fa-2x mb-2"></i>
          <h3 class="h4 text-primary fw-bold">Services</h3>
          <p>Use services to view a playlist and a youtube player</p>
        </a>
      </div>
    </div>
    <div class="col">
      <div class="nga-card-step p-4">
        <a routerLink="/components">
          <i class="text-primary far fa-clone fa-2x mb-2"></i>
          <h3 class="h4 text-primary fw-bold">Components</h3>
          <p>Channel component with Input, Output and Event Emitter</p>
        </a>
      </div>
    </div>
    <div class="col">
      <div class="nga-card-step p-4">
        <a routerLink="/httpclient">
          <i class="text-primary fas fa-network-wired  fa-2x mb-2"></i>
          <h3 class="h4 text-primary fw-bold">HttpClient</h3>
          <p>Use an external API with HttpClient Module</p>
        </a>
      </div>
    </div>
    <div class="col">
      <div class="nga-card-step p-4">
        <a routerLink="/forms">
          <i class="text-primary far fa-file-alt fa-2x mb-2"></i>
          <h3 class="h4 text-primary fw-bold">Forms</h3>
          <p>Select Template Driven Forms or Reactive Forms</p>
        </a>
      </div>
    </div>
    <div class="col">
      <div class="nga-card-step p-4">
        <a routerLink="/modal">
          <i class="text-primary fab fa-angular fa-2x mb-2"></i>
          <h3 class="h4 text-primary fw-bold">Modal</h3>
          <p>Create Modal with service and without jquery</p>
        </a>
      </div>
    </div>
    <div class="col">
      <div class="nga-card-step p-4">
        <a routerLink="/crud">
          <i class="text-primary fab fa-node-js fa-2x mb-2"></i>
          <h3 class="h4 text-primary fw-bold">CRUD</h3>
          <p>Create and Use API Rest</p>
        </a>
      </div>
    </div>
  </div>
</div>